<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="120px" style="margin-top: 10px" size="medium">
        <el-form-item label="文章标题" prop="newsTitle">
          <el-input v-model="temp.newsTitle" style="width: 450px" />
        </el-form-item>
        <el-form-item label="展示图" prop="newsImg">
          <el-input v-model="temp.newsImg" placeholder="图片链接" style="width: 450px" />
          <img-upload-single @onUpload="uploadImg" @onRemove="removeImg" ref="imgUpload" extra-tip="，建议尺寸为696×464"></img-upload-single>
        </el-form-item>
        <el-form-item label="文章来源" prop="newsSource">
          <el-input v-model="temp.newsSource" style="width: 450px" />
        </el-form-item>
        <el-form-item label="责任编辑" prop="newsEditor">
          <el-input v-model="temp.newsEditor" style="width: 450px" />
        </el-form-item>
        <el-form-item label="文章类型" prop="newsPosition">
          <el-select v-model="temp.newsPosition" style="width: 200px;" class="filter-item">
            <el-option v-for="item in positionList" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序权重" prop="newsRank">
          <el-input-number v-model="temp.newsRank" :min="0" :step="1" step-strictly style="text-align: center" size="medium" /><span style="color: gray; margin-left: 10px"> (权重数字越大，展示越靠前)</span>
        </el-form-item>
        <el-form-item label="是否展示" prop="newsDisplay">
          <el-switch v-model="temp.newsDisplay" active-color="#13ce66" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="this.$route.params.id>0" label="发布时间" prop="createTime">
          <el-date-picker v-model="temp.createTime" type="datetime" placeholder="设置新闻发布时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" />
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <tinymce v-model="temp.content" :uploader-type="3" :height="400" width="90%" />
        </el-form-item>
        <el-button type="primary" @click="saveNews()" style="margin-left: 120px">
          提交
        </el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getNews, saveOrUpdateNews } from '@/api/news'
import waves from '@/directive/waves' // waves directive
import ImgUploadSingle from '@/components/ImgUpload/ImgUploadSingle'
import { isIntegerNature } from '@/utils/validate'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'ArticleEdit',
  components: { ImgUploadSingle, Tinymce },
  directives: { waves },
  data() {
    return {
      formLoading: true,
      temp: {
        newsId: undefined,
        newsTitle: '',
        newsImg: '',
        newsSource: '',
        newsEditor: '',
        content: '',
        newsPosition: '',
        newsRank: '',
        newsDisplay: '',
        createTime: ''
      },
      rules: {
        newsTitle: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
        newsImg: [{ required: true, message: '请上传文章展示图', trigger: 'blur' }],
        newsSource: [{ required: true, message: '请填写文章来源', trigger: 'blur' }],
        newsEditor: [{ required: true, message: '请填写责任编辑', trigger: 'blur' }],
        content: [{ required: true, message: '请填写文章内容', trigger: 'change' }],
        newsPosition: [{ required: true, message: '请设置文章类型', trigger: 'change' }, { validator: isIntegerNature, trigger: 'change' }],
        newsRank: [{ required: true, message: '请设置文章展示排序', trigger: 'change' }, { validator: isIntegerNature, trigger: 'change' }],
        newsDisplay: [{ required: true, message: '请设置文章是否展示', trigger: 'change' }, { validator: isIntegerNature, trigger: 'change' }]
      },
      positionList: [
        { key: 0, value: '新闻资讯' },
        { key: 1, value: '信息资讯' },
        { key: 2, value: '维权保障信息' },
        { key: 3, value: '医疗互助信息' },
        { key: 4, value: '职工福利信息' }
      ]
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    initForm() {
      const newsId = this.$route.params.id
      if (newsId == 0) {
        console.log('Hello World!')
      } else {
        this.formLoading = true
        getNews(newsId).then(response => {
          this.temp = response.data
          this.formLoading = false
        })
      }
    },
    saveNews() {
      const data = Object.assign({}, this.temp)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.formLoading = true
          saveOrUpdateNews(data).then(() => {
            this.$notify({
              title: 'Success',
              message: '提交成功',
              type: 'success',
              duration: 2000
            })
            this.$router.push({ name: 'Article' })
            this.formLoading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    removeImg() {
      this.temp.newsImg = ''
    },
    uploadImg() {
      this.temp.newsImg = this.$refs.imgUpload.url
    },
  }
}
</script>
